<template>
  <div class="app-container">
      <el-table :data="tableData"  border  style="width: 100%">
        <el-table-column  prop="index" label="序号" width="180"></el-table-column>
        <el-table-column prop="name" label="名称" width="180"> </el-table-column>
            <el-table-column prop="address" label="操作">
                  <template slot-scope="scope">
                  <el-button type="primary" round  @click="modifyThe(scope.row)"  >编辑</el-button>
                  <el-button type="danger" round @click="del(scope.row)">删除</el-button>
                  </template>
            </el-table-column>
      </el-table>
   

        <el-dialog title="修改" :visible.sync="dialogFormVisible" >
          <el-form   >
                <el-form-item label="序号" :label-width="formLabelWidth">
                  <el-input v-model="form.index" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>

          </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="cancel">取 消</el-button>
                  <el-button type="primary" @click="theEditor">确 定</el-button>
                </div>
        </el-dialog>

  </div>
</template>

<script>
import {getList, deltable, updatetable} from '@/api/table'
 export default {
    data() {
      return {
        tableData: [],
        dialogFormVisible:false,
        form:{},
        formLabelWidth:'100px'
      
      }
    },
    mounted(){
      //获取桌子列表
      getList().then(res=>{
        // console.log(res);
        // 把获取的值赋值给空数组
        this.tableData = res.data
      })
    },
    methods:{
      del(cd){
        //点击删除的时候弹出提示框
         this.$confirm('此操作为删除该桌子, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //点击确定的时候触发删除桌子的请求
             deltable({id:cd._id}).then(res=>{
              //提示删除成功
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                                    });
                // console.log(res);
            getList().then(res=>{
              // console.log(res);
              //删除后重新获取数据
              this.tableData = res.data
                      })
              })
            console.log(cd._id);
              
        }).catch(() => {
          //点击取消的时候弹出提示
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        })
      //  
      },    
      //点击编辑的时候触发此方法
   modifyThe(obj){
    //让对话框显示
    this.dialogFormVisible = true
    //把对应的值赋值给form
    this.form = obj
   },
   //点击确定的时候触发此方法
   theEditor(){
    //发起修改请求
     updatetable({id:this.form._id,index:this.form.index,name:this.form.name}).then(res=>{
              //让对话框隐藏
            this.dialogFormVisible =false
            //修改成功后弹出提示
             this.$message({  type: 'success', message: '修改成功!'});
    })
    // console.log(this.form);
   },
   cancel(){
    //点击取消让对话框隐藏
       this.dialogFormVisible  = false
       //重新获取数据
        getList().then(res=>{ this.tableData = res.data  })
    }

    }
  }

</script>
